<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId" :isPropagation="isPropagation" :isHiddenComp="isHiddenComp">
    <template v-slot:common>
      <div class="wb-carousel" :style="styles" ref="swiper">
        <div class="swiper swiper-container swiper-container-h" ref="scrollSwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" :class="{'swiper-no-swiping': isNoSwiping}" v-for="(item_, index) in wbListOrLists" :key="index" @click="onEmitSlideChange($event, index)">
              <component v-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.reward" :ref="setItemRef" :is="item.commonAttr.itemType" :item="item" :qItem="item_" :index="index" :style="itemConStyle" :pageId="pageId" :popId="popId"></component>
              <component v-else-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.question" :ref="setItemRef" :is="item.commonAttr.itemType" :item="item" :qItem="item_" :index="index" :clickQuestionType="clickQuestionType" :ruleValues="ruleValues" :dimensionIndexs="dimensionIndexs" :style="itemConStyle" :pageId="pageId" :popId="popId"></component>
              <component v-else-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.different" :ref="setItemRef" :is="item.commonAttr.itemType" :item="item" :qItem="item_" :different="different" :isPropagation="getIsPropagation" :index="index" :style="itemConStyle" :pageId="pageId" :popId="popId"></component>
              <component v-else-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.swiperSelect" :ref="setItemRef" :is="item.commonAttr.itemType" :item="item" :qItem="item_" :isPropagation="getIsPropagation" :index="index" :style="itemConStyle" :pageId="pageId" :popId="popId"></component>
              <component v-else :ref="setItemRef" :is="item.commonAttr.itemType" :item="item" :qItem="item_" :isPropagation="getIsPropagation" :index="index" :style="itemConStyle" :pageId="pageId" :popId="popId"></component>
            </div>
          </div>
          <div @click.stop v-if="item.commonAttr.paginationType == PAGINATION_TYPE[1].value" :id="item.id + '-pagination'" class="swiper-pagination" :class="getPaginationClass"></div>
          <template v-else-if="item.commonAttr.paginationType == PAGINATION_TYPE[2].value">
            <div @click.stop :id="item.id + '-prev'" class="swiper-button-prev" :style="getSwiperPreStyle"></div>
            <div @click.stop :id="item.id + '-next'" class="swiper-button-next" :style="getSwiperNextStyle"></div>
          </template>
          <template v-else-if="item.commonAttr.paginationType == PAGINATION_TYPE[3].value">
            <div @click.stop :id="item.id + '-pagination'" class="swiper-pagination" :class="getPaginationClass"></div>
            <div @click.stop :id="item.id + '-prev'" class="swiper-button-prev" :style="getSwiperPreStyle"></div>
            <div @click.stop :id="item.id + '-next'" class="swiper-button-next" :style="getSwiperNextStyle"></div>
          </template>
        </div>
        <div class="mask-con" v-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.different && different.isDisplay">
          <img class="start" @click.stop="onStartGameAndHideMask" v-if="different.isBtnStart" src="https://static.hd.xxx.com/upload/biz/26/440359.png">
          <img class="go-on" :style="goonStyle" @click.stop="onStartGameAndHideMask" v-if="!different.isBtnStart" src="https://static.hd.xxx.com/upload/biz/26/879767.png">
          <div class="different-mask"></div>
        </div>
      </div>
    </template>
  </inject-template>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { carousel } from "@/components/js/carousel"
import { PAGINATION_TYPE } from '@/common/const'
import { COMMON_ITEM_TYPE_MAP, CAROUSEL_TYPES_MAP } from '@/const/'

import { defineAsyncComponent } from 'vue'
import { ref, onBeforeUpdate, reactive } from 'vue'
import { isJSON, getCompIdByParam} from '@/plugins/utils'
import { CONTROL_TYPES } from '@/common/const'
import { EventBus } from '@/store/index'
import { getPxOVwByValue } from '@/store/utils'

import '@/assets/css/carousel.scss'

const components = {
  InjectTemplate,
  WbItemQuestion: defineAsyncComponent(() => import('@/components/items/wb-item-question.vue')),
  WbItemFindDifferent: defineAsyncComponent(() => import('@/components/items/wb-item-find-different.vue')),
  WbItemCommon: defineAsyncComponent(() => import('@/components/items/wb-item-common.vue')),
  WbItemImgUser: defineAsyncComponent(() => import('@/components/items/wb-item-img-user.vue')),
  WbItemReward: defineAsyncComponent(() => import('@/components/items/wb-item-reward.vue')),
  WbItemJewelleryVideo: defineAsyncComponent(() => import('@/components/items/wb-item-jewellery-video.vue')),
  WbItemSwiperSelect: defineAsyncComponent(() => import('@/components/items/wb-item-swiper-select.vue')),
}
//796 测一测你在女团是神担当 387 国潮性格测试 405欧气大比拼 386 国潮主页面 608 极客数码
export default {
  name: 'WbCarousel',
  mixins: [utils, commonUtils, carousel],
  components,
  setup(props) {
    let itemRefs = []
    const setItemRef = el => {
      itemRefs.push(el)
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })

    let state = {
      goonStyle: {
        width: getPxOVwByValue(192),
        height: getPxOVwByValue(156),
      },
      itemRefs,
      setItemRef,
      isHiddenComp: ref(true),
      COMMON_ITEM_TYPE_MAP: COMMON_ITEM_TYPE_MAP,
      PAGINATION_TYPE: PAGINATION_TYPE,
    }

    let itemType = props.item.commonAttr.itemType
    if(itemType == COMMON_ITEM_TYPE_MAP.question) {
      state.clickQuestionType = {}
      state.dimensionIndexs = props.item.commonAttr.questionIndexStr.split(',')
      if(isJSON(props.item.commonAttr.questionPushRule)){
        state.ruleValues = JSON.parse(props.item.commonAttr.questionPushRule);
      }
    }else if(itemType == COMMON_ITEM_TYPE_MAP.different){
      const different = reactive( { isDisplay: true, isBtnStart: true, isShowPop: false, isTiming: false } )
      state.different = different
    }
    return state
  },
  computed: {
    getIsPropagation(){
      let slideNum = 1
      if(this.commonAttr.carouselType ==  CAROUSEL_TYPES_MAP.slidesPerView && this.commonAttr.slideNum){
        slideNum = this.commonAttr.slideNum
      }
      if(slideNum == 1){
        return true
      }else{
        return false
      }
    },
  },
  methods: {
    onEmitSlideChange(e, itemIndex){
      if(this.isH5Edit){
        return
      }
      this.commonAttr.itemIndex = itemIndex

      let itemType = this.item.commonAttr.itemType
      let questionItem
      let qIndex
      if(itemType == COMMON_ITEM_TYPE_MAP.question){
        questionItem = e && e.target
        if(questionItem){
          qIndex = parseInt(questionItem.getAttribute("data-index"))
          if(qIndex >= 0){
            this.itemRefs[itemIndex].onQItem(e, itemIndex, parseInt(qIndex), this.slideTo, this.resetSwiper)
          }
        }
      }else if(itemType == COMMON_ITEM_TYPE_MAP.swiperSelect){
        questionItem = e && e.target
        if(questionItem){
          qIndex = parseInt(questionItem.getAttribute("data-index"))
          if(qIndex >= 0){
            // 这里应该是触发了所有的按钮事件
            _.forEach(this.itemRefs, itemRef => {
              itemRef.onSelect(e, itemIndex, this.slideTo, this.resetSwiper)
            });
            let relateCompId = getCompIdByParam(this.commonAttr.relateCompId)
            if(relateCompId){
              let relateCompData = this.componentMap[relateCompId]
              if(relateCompData){
                relateCompData.commonAttr.itemIndex = itemIndex
              }
            }
          }
        }
      }else if(itemType == COMMON_ITEM_TYPE_MAP.different){
        questionItem = e.target
        questionItem.parentElement.style.zIndex = 50
        let qIndex = parseInt(questionItem.getAttribute("data-index"))
        if(qIndex >= 0){
          let gridItem = this.itemRefs[itemIndex].grids[qIndex]
          this.itemRefs[itemIndex].onFindDifferent(e, gridItem, questionItem, itemIndex, this.nextSlide, this.onShowMask, this.showPop)
        }
      }else if(itemType == COMMON_ITEM_TYPE_MAP.common){
        //冒泡上去
        let className = e && e.target.classList[0]
        if(className && className == "wb-item-common"){
          e.stopPropagation()
          let itemData = this.wbListOrLists[itemIndex]
          if(itemData.link && itemData.link.length > 0){
            this.openLinkBySelfUrl(itemData.link);
          }
        }else{
          this.isPropagation = true
          return
        }
      }
    },
    onStartGameAndHideMask(){
      let numberData = this.getItemControls[CONTROL_TYPES.number]
      // numberData.data.num = 3
      if(numberData && numberData.data.num <= 0){
        this.showAlert("亲，没有游戏次数了，请点击下方 完成任务 按钮获得游戏次数吧！！")
      }else{
        this.different.isDisplay = false
        if(this.swiper.activeIndex != 0){
          this.slideTo({slideIndex: 0})
        }
        this.startGame()
      }
    },
    startGame(){
      //开始游戏，开始计时，隐藏mask
      this.initStartGameData()
      this.itemRefs[0].refreshGrid()
      let eventAttr = this.item.eventAttr
      eventAttr.isNoActEventResult = true
      //计数组件也会调用，在次发送事件触发onEvent，在这里设置isPropagation这个往上冒泡都不管用，不知道为啥
      EventBus.$emit("itemClick", {id: this.item.id, index: 0})
    },
    initStartGameData(){
      EventBus.$emit("timerStart")
      this.different.isShowPop = false
      this.different.isTiming = true
    },
    onShowMask(){
      this.different.isDisplay = true
      this.different.isBtnStart = false
    },
    nextSlide({ slideIndex }){
      this.slideTo({ slideIndex })
      this.itemRefs[slideIndex].refreshGrid()
    }
  }
};
</script>
<style lang="scss">
.wb-carousel{
  width: inherit;
  height: inherit;

  .bg-con{
    width: inherit;
    height: inherit;
  }
  .mask-con{
    width: inherit;
    height: inherit;

    .start, .go-on {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 22;
      width: var(--size-192);
      height: var(--size-156);
    }
    .different-mask{
      position: absolute;
      top: 0;
      left: 0;
      width: inherit;
      height: inherit;
      background-color:rgba(0,0,0, 0.01);
      z-index: 10;
    }
  }
}
</style>

